<template>
  <view class="image-wrapper" :style="{ width, height }">
    <image
      class="image"
      :class="round ? 'round-active' : ''"
      :style="{ width, height }"
      @error="onError"
      @load="onImageLoad"
      :src="src"
      @click="handleImgClick"
    ></image>
  </view>
</template>

<script>
export default {
  props: {
    // 长按图片显示发送
    showMenuByLongpress: Boolean,
    mode: {
      type: String
    },
    src: {
      type: String,
      default: '/static/logo.png'
    },
    round: {
      type: Boolean,
      default: false
    },
    width: {
      type: String,
      default: '100px'
    },
    height: {
      type: String,
      default: '100px'
    },
    lazy: Boolean
  },
  data() {
    return {
      title: 'Hello'
    }
  },
  onLoad() {},
  methods: {
    onError() {
      console.log('onError')
    },
    onImageLoad() {
      console.log('onImageLoad')
    },
    handleImgClick() {
      this.$emit('imgClick')
    }
  }
}
</script>

<style lang="scss">
.image-wrapper {
  // width: 100%;
  // height: 100%;
  .round-active {
    border-radius: 50%;
  }
}
</style>
